<style lang="less">
  @import './roles.less';
</style>
<template>
  <div>
	<Form :model="seachForm" inline :label-width="80">
    <Form :model="dataForm" :label-width="80">
      <FormItem prop="isSubject" label="请选择科目：">
        <template>
          <i-select v-model="isSubject" style="width:200px" not-found-text="无科目">
            <i-option v-for="item in courses" clearable :value="item.id" v-bind:key="item.id">
              {{item.id}}->{{item.name}}
            </i-option>
          </i-select>
        </template><div></div>
      </FormItem>
      <FormItem prop="isChapter" label="请选择章节：">
        <template>
          <i-select v-model="isChapter" style="width:200px" not-found-text="无章节">
            <i-option v-for="item in chapters" clearable :value="item.id" v-bind:key="item.id">
              {{item.courseId}}->{{item.id}}->{{item.name}}
            </i-option>
          </i-select>
        </template><br/><br/>
      </FormItem>
      <FormItem prop="isKnowledgepoints" label="请选择知识点">
          <template>
          <i-select v-model="isKnowledgepoints" style="width:200px" not-found-text="无知识点">
            <i-option v-for="item in knowledgepoints" clearable :value="item.id" v-bind:key="item.id">
              {{item.courseId}}->{{item.chapterId}}->{{item.name}}
            </i-option>
          </i-select>
        </template><br/><br/><br/>
      </FormItem>
      <center>
      <FormItem>
        <Button  @click="startSubmit()">开始做题</Button>
      </FormItem>
      </center>
    </Form>
    </Form><br><br><br>

    <div v-if="isEditing == true" id="myDiv">
      <div v-for="(item,index) in sim" >

        <h2><font size="2" color="blue">{{item.title}}(单选题)</font></h2><br>
        <p style="text-align:justify">
          <input type="radio" class="input-radio" name="" value="A" v-model="simpleResult[index]"><label>{{item.A}}</label><br>
          <input type="radio" class="input-radio" name="" value="B" v-model="simpleResult[index]"><label>{{item.B}}</label><br>
          <input type="radio" class="input-radio" name="" value="C" v-model="simpleResult[index]"><label>{{item.C}}</label><br>
          <input type="radio" class="input-radio" name="" value="D" v-model="simpleResult[index]"><label>{{item.D}}</label><br>
        </p>
        <Button  @click="ok(index,1)">提交</Button>
      </div>

      <div v-for="(i,index) in mul" >

        <h2><font size="2" color="blue">{{i.title}}(多选题)</font></h2><br>
        <p style="text-align:justify">
          <input type="checkbox" name="" value="A" v-model="mulResult[index]"><label>{{i.A}}</label><br>
          <input type="checkbox" name="" value="B" v-model="mulResult[index]"><label>{{i.B}}</label><br>
          <input type="checkbox" name="" value="C" v-model="mulResult[index]"><label>{{i.C}}</label><br>
          <input type="checkbox" name="" value="D" v-model="mulResult[index]"><label>{{i.D}}</label><br>
        </p>
        <Button  @click="ok(index,2)">提交</Button>
      </div>
      <div v-if="sim.length == 0 && mul.length == 0"><h2><font size="2" color="red">知识点选择有误！</font>
        <font size="2" color="green">或该知识点在题库中暂无题目！</font></h2><br></div>
    </div>
    <div v-else>
      该知识点在题库中尚无题目...
    </div>

  </div>
</template>
<script>
import { getRolesList, getRole, addRole, updateRole, deleteRole } from '@/api/roles'
import {getsimpleChoicesList} from '@/api/simpleChoices'
import {getmultipleChoicesList} from '@/api/multipleChoices'
import {getCourseList, getCourse, addCourse, updateCourse, deleteCourse} from '@/api/course'
import {getChapterList} from '@/api/chapters'
import {getKnowledgepointList} from '@/api/knowledgepoints'
export default {
  //<div v-if="i.chapterID == isChapter && i.subjectID == isSubject && i.knowledgepointID == isKnowledgepoints">
  //<div v-if="item.chapterID == isChapter && item.subjectID == isSubject && item.knowledgepointID == isKnowledgepoints">
  name: 'roles',
  data () {
	 return {
      message: 'Hello Vue!',
      simpleResult:[],
      mulResult:[[],[]],
      currentRow: null,
      isEditing: false,
      isSubject:0,
      isChapter:0,
      id:'',
      isKnowledgepoints:0,
      seachForm: {
        role_id: ''
      },
      dataForm: {},
     courses: [], // 课程列表
     chapters: [], //章节列表
     knowledgepoints: [],//知识点列表
     simpleChoices:[],//单选题列表
     multipleChoices:[],//多选题列表
     sim:[],
     mul:[]
    }
  },

   created() {
    console.log('created message is: ' + this.message);
    this.queryList();
  },
  mounted() {
    console.log('mounted message is: ' + this.message);
  },
  methods : {
	seacherSubmit: function() {
      console.log(this.seacherForm);
      this.pageInfo.pageNumber = 1;
      this.queryList();
    },
    //ajax刷新题目界面
    loadXMLDoc:function()
    {
      var xmlhttp;
      if (window.XMLHttpRequest)
      {
        //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
        xmlhttp=new XMLHttpRequest();
      }
      else
      {
        // IE6, IE5 浏览器执行代码
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
      xmlhttp.onreadystatechange=function()
      {
        if (xmlhttp.readyState==4 && xmlhttp.status==200){

          document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
        }
      }
      xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
      xmlhttp.send();
    },
	queryList: function() {
      var queryParams = {
      };
    getsimpleChoicesList(queryParams).then(res => {
        this.simpleChoices = res.data.rows;
      });
    getmultipleChoicesList(queryParams).then(res => {
      this.multipleChoices = res.data.rows;
    });
    getCourseList(queryParams).then(res => {
      this.courses = res.data.rows;
    });
    getChapterList(queryParams).then(res => {
      this.chapters = res.data.rows;
    });
    getKnowledgepointList(queryParams).then(res => {
      this.knowledgepoints = res.data.rows;
    });
    },
    startSubmit:function () {
      this.simpleResult.length = this.simpleChoices.length;
      this.mulResult.length = this.multipleChoices.length;
	    this.isEditing = true;
	    this.sim.length = 0;
	    this.mul.length = 0;
      for(var item in this.simpleChoices){
        if(this.simpleChoices[item].subjectID == this.isSubject && this.simpleChoices[item].chapterID == this.isChapter
        && this.simpleChoices[item].knowledgeID == this.isKnowledgepoints){
          this.sim.push(this.simpleChoices[item]);
        }
      }

      for(var item in this.multipleChoices){
        if(this.multipleChoices[item].subjectID == this.isSubject && this.multipleChoices[item].chapterID == this.isChapter
          && this.multipleChoices[item].knowledgeID == this.isKnowledgepoints){
          this.mul.push(this.multipleChoices[item]);
        }
      }
      if(this.isSubject == 0 && this.isChapter == 0 && this.isKnowledgepoints == 0){
        alert("未选择知识点，将显示全部题目！！！");
        this.sim = this.simpleChoices;
        this.mul = this.multipleChoices;
      }

      //this.loadXMLDoc();

    },
    ok:function (index,k) {
      if(k==1){
        alert("您的答案为：" + this.simpleResult[index] + "；正确答案为：" + this.sim[index].result);
      }
      else{
        var array = new Array();
        if(this.mul[index].resultA == 1)
          array.push("A");
        if(this.mul[index].resultB == 1)
          array.push("B");
        if(this.mul[index].resultC == 1)
          array.push("C");
        if(this.mul[index].resultD == 1)
          array.push("D");
        alert("您的答案为：" + this.mulResult[index].toString() + "；正确答案为：" + array.toString());
      };
      //alert("123.." + index + "," + k);
    }
  }
}
</script>
